<div class="m-portlet m-portlet--mobile">
    <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">
                    字典明细
                </h3>
            </div>
        </div>
        <div class="m-portlet__head-tools">
            <button (click)="addItemDetail()" class="btn btn-primary"><i class="fa fa-plus"></i> 添加字典明细</button>
        </div>
    </div>
    <div class="m-portlet__body">
        <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
            <p-table
                #dataTable
                (onLazyLoad)="getDataItemDetails($event)"
                [value]="primengTableHelper.records"
                rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                [paginator]="false"
                [lazy]="true"
                [scrollable]="true"
                ScrollWidth="100%"
                [responsive]="primengTableHelper.isResponsive"
                [resizableColumns]="primengTableHelper.resizableColumns"
            >
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width: 100px">
                            {{ l('Actions') }}
                        </th>
                        <th style="width: 40px">
                            序号
                        </th>
                        <th style="width: 150px" pSortableColumn="f_ItemCode">
                            编号
                            <p-sortIcon field="f_ItemCode"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="f_ItemName">
                            名称
                            <p-sortIcon field="f_ItemName"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="f_ItemValue">
                            值
                            <p-sortIcon field="f_ItemValue"></p-sortIcon>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
                    <tr>
                        <td style="width: 100px">
                            <div class="btn-group dropdown" dropdown container="body">
                                <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                    <i class="fa fa-cog"></i><span class="caret"></span> {{ l('Actions') }}
                                </button>
                                <ul class="dropdown-menu" *dropdownMenu>
                                    <li>
                                        <a
                                            href="javascript:;"
                                            *ngIf="permission.isGranted('Pages.BaseData.DataItemDetails.Create')"
                                            (click)="this.createOrEditDataItemDetailModal.show(record)"
                                            >{{ l('Edit') }}</a
                                        >
                                    </li>
                                    <li>
                                        <a
                                            href="javascript:;"
                                            *ngIf="permission.isGranted('Pages.BaseData.DataItemDetails.Delete')"
                                            (click)="deleteUser(record.id)"
                                            >{{ l('Delete') }}</a
                                        >
                                    </li>
                                </ul>
                            </div>
                        </td>
                        <td style="width: 40px">
                            {{ i + 1 + paginator.first }}
                        </td>
                        <td style="width: 150px">
                            <span class="ui-column-title"> 编号</span>
                            {{ record.f_ItemCode }}
                        </td>
                        <td style="width: 150px">
                            <span class="ui-column-title"> 名称</span>
                            {{ record.f_ItemName }}
                        </td>
                        <td style="width: 150px">
                            <span class="ui-column-title"> 值</span>
                            {{ record.f_ItemValue }}
                        </td>
                    </tr>
                </ng-template>
            </p-table>
            <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                {{ l('NoData') }}
            </div>
            <div class="primeng-paging-container">
                <p-paginator
                    rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                    #paginator
                    (onPageChange)="getDataItemDetails($event)"
                    [totalRecords]="primengTableHelper.totalRecordsCount"
                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                >
                </p-paginator>
                <span class="total-records-count">
                    {{ l('TotalRecordsCount', primengTableHelper.totalRecordsCount) }}
                </span>
            </div>
        </div>
    </div>
</div>

<createOrEditDataItemDetailModal
    #createOrEditDataItemDetailModal
    (modalSave)="getDataItemDetails($event)"
></createOrEditDataItemDetailModal>
